<script setup lang="ts">

import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { RouteName } from './enums/route'

const active = ref(RouteName.home)
const tabs = ref([
  {
    name: '文档手册',
    icon: 'home-o',
    routeName: RouteName.home,
  },
  {
    name: '敬请期待',
    icon: 'search',
    routeName: RouteName.search,
  },
  {
    name: '敬请期待',
    icon: 'friends-o',
    routeName: RouteName.about,
  },
  {
    name: '敬请期待',
    icon: 'setting-o',
    routeName: RouteName.person,
  },
])

const router = useRouter()

function onChangeTab(name: string) {
  router.push({ name })
}
</script>

<template>
  <div class="container">
    <RouterView />
    <VanTabbar
      v-model="active"
      @change="onChangeTab"
    >
      <VanTabbarItem
        v-for="(tab, index) in tabs"
        :key="index"
        :icon="tab.icon"
        :name="tab.routeName"
      >
        {{ tab.name }}
      </VanTabbarItem>
    </VanTabbar>
  </div>
</template>

<style lang="less" scoped>
.container {
  inline-size: 370px;
  block-size: 600px;
  background-color: #f2f3f5;
}
</style>
